import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image, Modal } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import navigationSeevice from '../../../../../../components/navigation/navigationSeevice';
import { style } from '../../../../../../theme/style';
import HTTP from '../../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../../config/api';
import { GLOBAL } from '../../../../../../config/global';
import { orderStyle, commonStyle } from '../../_common/style';

const scale = GLOBAL.SCALE;
export class ContractCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
		}
	}
	
	componentWillReceiveProps (props) {
		
	}

	render () {
		let { data, index, length, ifEdit, baseData, refresh, choice,init } = this.props || {};
		let { contactorName, mobileNo, contractorGoodsList } = data || {};
		let mobile = ifEdit ? mobileNo : mobileNo && (mobileNo.substring(0, 3) + '****' + mobileNo.substring(7, 11))
		return (
			<TouchableOpacity style={[styles.item, index !== (length - 1) ? styles.border : null]}
				onPress={() => { navigationSeevice.navigate('ContractDetailPage', { data, baseData, ifEdit, choice,callback:()=>init() }) }}>
				<NavigationEvents
					onWillFocus={({ action }) => {
						refresh && refresh();
					}}
				/>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.bold]}>{contactorName || '--'}</Text>
					<Text style={[styles.commonText, styles.bold]}>{mobile || '--'}</Text>
				</View>
				<View style={styles.row} key={index}>
					{
						contractorGoodsList && contractorGoodsList.length ?
							contractorGoodsList.map((item, index) => {
								return (
									<View style={styles.tipTextView} key={index}><Text style={styles.tipText}>{item.goodsName}</Text></View>
								)
							})
							: null
					}
				</View>
			</TouchableOpacity>
		)
	}
}

const styles = StyleSheet.create({
	item: {
		paddingTop: 14 * scale,
		paddingBottom: 6 * scale,
	},
	border: {
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0'
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 6 * scale,
		paddingBottom: 8 * scale,
	},
	commonText: {
		fontSize: 12 * scale,
		color: '#34475F',
		marginRight: 10 * scale,
	},
	bold: {
		fontWeight: 'bold'
	},
	tipTextView: {
		padding: 8 * scale,
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		marginRight: 10 * scale,
		backgroundColor: style.color.bgGray,
		borderRadius: 8 * scale,
	},
	tipText: {
		fontSize: 10 * scale,
		color: '#34475F',
	}
})